<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        body { 
            margin: 0; 
            padding: 20px; 
            background-color: #f5f5f5; /* 浅灰色背景 */
            font-family: Arial, sans-serif;
        }
        #canvas { 
            border: 1px solid #ccc; 
            background-color: white;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        button { 
            margin-top: 10px; 
            margin-right: 10px; 
            padding: 6px 12px;
            background-color: #e0e0e0;
            border: 1px solid #ccc;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #d0d0d0;
        }
        button:disabled {
            background-color: #f0f0f0;
            color: #aaa;
            cursor: not-allowed;
        }
        #info { 
            margin-top: 10px; 
            font-size: 14px; 
            color: #333; 
            background-color: #eaeaea;
            padding: 10px;
            border-radius: 4px;
        }
        .point-label { 
            position: absolute; 
            background: rgba(0,0,0,0.7); 
            color: white; 
            padding: 2px 5px; 
            border-radius: 3px;
            font-size: 12px;
        }
        #reference { 
            display: inline-block; 
            width: 200px; 
            height: 200px; 
            border: 1px solid #aaa; 
            margin: 10px 0; 
            position: relative;
            background-color: white;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .ref-point {
            position: absolute;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            transform: translate(-50%, -50%);
        }
        .ref-label {
            position: absolute;
            font-size: 10px;
            transform: translate(-50%, -50%);
        }
        .instruction-panel {
            background-color: #e8e8e8;
            padding: 10px;
            border-radius: 4px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div style="display: flex; flex-direction: row; gap: 20px;">
        <div>
            <canvas id="canvas"></canvas>
            <br>
            <div id="info">已选择: <span id="point-count">0</span>/7 个点</div>
            <div class="instruction-panel">
                请先选择中心点(0,0)，然后从右侧点(1,0)开始<b>逆时针</b>选择剩余的点
                <br>当前应选择: <span id="current-point-label">中心点(0,0)</span>
            </div>
            <div id="point-labels"></div>
            <br>
            <button onclick="clearPoints()">清除所有点</button>
            <button onclick="completeSelection()" id="complete-btn" disabled>完成选择</button>
        </div>
        <div>
            <h3>点的选择顺序参考:</h3>
            <div id="reference"></div>
            <div class="instruction-panel">选择顺序: 先中心点，然后从右侧开始<b>逆时针</b>选择六边形上的点</div>
        </div>
    </div>
    <script>
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        var img = new Image();
        var points = [];
        var pointLabels = ["中心(0,0)", "右(1,0)", "右上(1/2,√3/2)", 
                          "左上(-1/2,√3/2)", "左(-1,0)", 
                          "左下(-1/2,-√3/2)", "右下(1/2,-√3/2)"];
        
        // 绘制参考图
        function drawReference() {
            var ref = document.getElementById('reference');
            var centerX = ref.offsetWidth / 2;
            var centerY = ref.offsetHeight / 2;
            var radius = Math.min(centerX, centerY) * 0.7;
            
            // 中心点 (0,0)
            createRefPoint(centerX, centerY, 0, "red");
            
            // 外部六边形上的点
            for (var i = 0; i < 6; i++) {
                var angle = (i * Math.PI / 3) - Math.PI / 6; // 从右侧开始，逆时针
                var x = centerX + radius * Math.cos(angle);
                var y = centerY - radius * Math.sin(angle);
                createRefPoint(x, y, i+1, "green");
            }
        }
        
        function createRefPoint(x, y, index, color) {
            var ref = document.getElementById('reference');
            var point = document.createElement('div');
            point.className = 'ref-point';
            point.style.left = x + 'px';
            point.style.top = y + 'px';
            point.style.backgroundColor = color;
            ref.appendChild(point);
            
            var label = document.createElement('div');
            label.className = 'ref-label';
            label.style.left = x + 'px';
            label.style.top = (y + 15) + 'px';
            label.textContent = index;
            ref.appendChild(label);
        }
        
        img.onload = function() {
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0);
            drawReference();
        };
        
        img.src = '{IMAGE_DATA}';
        
        canvas.onclick = function(e) {
            if (points.length >= 7) return;
            
            var rect = canvas.getBoundingClientRect();
            var x = (e.clientX - rect.left) * (canvas.width / rect.width);
            var y = (e.clientY - rect.top) * (canvas.height / rect.height);
            
            points.push([x, y]);
            updatePointCount();
            
            redrawCanvas();
            
            if (points.length === 7) {
                document.getElementById('complete-btn').disabled = false;
            }
        };
        
        function updatePointCount() {
            document.getElementById('point-count').textContent = points.length;
            if (points.length < pointLabels.length) {
                document.getElementById('current-point-label').textContent = pointLabels[points.length];
            } else {
                document.getElementById('current-point-label').textContent = "已完成";
            }
        }
        
        function redrawCanvas() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.drawImage(img, 0, 0);
            
            // 清除标签
            document.getElementById('point-labels').innerHTML = '';
            
            // 绘制所有点和标签
            for (var i = 0; i < points.length; i++) {
                var px = points[i][0];
                var py = points[i][1];
                
                // 绘制点
                ctx.beginPath();
                ctx.arc(px, py, 5, 0, 2 * Math.PI);
                ctx.fillStyle = i === 0 ? 'red' : 'green'; // 中心点用红色
                ctx.fill();
                
                // 添加标签
                var rect = canvas.getBoundingClientRect();
                var labelX = px * (rect.width / canvas.width) + rect.left;
                var labelY = py * (rect.height / canvas.height) + rect.top;
                
                var label = document.createElement('div');
                label.className = 'point-label';
                label.textContent = i + 1 + ": " + (i < pointLabels.length ? pointLabels[i] : "点" + (i+1));
                label.style.left = (labelX + 10) + 'px';
                label.style.top = (labelY - 10) + 'px';
                document.getElementById('point-labels').appendChild(label);
            }
        }
        
        function clearPoints() {
            points = [];
            updatePointCount();
            redrawCanvas();
            document.getElementById('complete-btn').disabled = true;
        }
        
        function completeSelection() {
            if (points.length === 7) {
                window.external.invoke(JSON.stringify(points));
            } else {
                alert("请选择7个点");
            }
        }
        
        window.addEventListener('resize', redrawCanvas);
    </script>
</body>
</html> 